<template>
  <div>
    <!-- <CustomTitle title="样品列表">
      <template #title><span></span></template>
     
    </CustomTitle> -->
    <a-table :scroll="{ y: 370 }" class="" :pagination="false" :loading="loading" :columns="default_columns" :data-source="data">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'progress'">
          <img v-if="!record.status" src="@/assets/images/progress_loading.png" class="loading" />
          <img v-else src="@/assets/images/progress_success.png" />
        </template>
      </template>
    </a-table>
  </div>
</template>
<script setup lang="ts">
import { apiReports, apiSamples } from '@/http/api/controller_status';
import { default_columns } from './columns';
const data = ref<any[]>([]);
const loading = ref<boolean>(false);
let timer: any = null;
const getData = async () => {
  try {
    const res = await apiSamples();
    console.log(res.data);
    data.value = res.data;
  } catch (error) {}
};

const getReports = async () => {
  try {
    loading.value = true;
    const res = await apiReports();

    res.data.forEach((item: any) => {
      data.value.forEach((i: any) => {
        if (i.fileName === item.fileName) {
          i.status = true;
        }
      });
    });
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
async function getAllData() {
  // if (timer) {
  //   await getData();
  //   getReports();
  //   return;
  // }
  // timer = setInterval(async () => {
  await getData();
  getReports();
  // }, 60 * 1000);
}
onBeforeMount(() => {
  getAllData();
});
defineExpose({
  refresh: getAllData,
});
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
});

</script>
<style lang="less" scoped>
.loading {
  animation: loading 1s infinite linear;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
